<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>断路器动作分析</title>
		<link rel="stylesheet" href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
		.breakerXiHuTime li {
			font-size: 20px;
		}
		
		.nav li a, .box-title {
			font-size: 16px;
		}
		
		.tab-content .tab-pane ul>.active a, .tab-content .tab-pane ul>.active a:hover {
			background-color: #3c8dbc;
			color: white;
		}
		
		.nav-tabs-custom {
			margin-bottom: 0;
		}
		
		.wrap-condition .form-inline {
			float: left;
			margin: 0px 5px;
		}
		.hideDom{display:none !important}
		.noData{text-align:center;margin-top:18%}
		</style>
	</ui:define>
	<ui:define name="content">
		<div class="nav-tabs-custom">
			<ul class="nav nav-tabs pull-left">
				<li class="active"><a href="#pane2" data-toggle="tab">动作时间</a></li>
				<li id="tab1"><a href="#pane1" data-toggle="tab">熄弧时间</a></li>
			</ul>
			<div class="tab-content no-padding">
				<div class="chart tab-pane" id="pane1" style="position: relative">
					<div class="nav-tabs-custom">
						<ul class="nav nav-tabs pull-left">
							<li class="active"><a href="#pane3" data-toggle="tab" id="tab3">断路器熄弧时间</a></li>
							<li><a href="#pane4" id="tab4" data-toggle="tab">熄弧时间概率分布</a></li>
						</ul>
						<div class="tab-content no-padding">
						    <!-- pane3 is start for 熄弧时间[断路器熄弧时间 ] -->
							<div class="chart tab-pane active hideDom" id="pane3" style="position: relative">
								<div class='box box-success'>
									<div class="box-header">
										<div class="form-inline">
											<input type="text" class="form-control" id="startTimeArc" placeholder="起始日期" />至 <input
												type="text" class="form-control" id="endTimeArc" placeholder="终止日期" />
											<button class='btn btn-default' id='check-btnArc'>查询</button>
										</div>
									</div>
									<div class="box-body">
										<div id="xihu" style="height: 500px;"></div>
									</div>
								</div>
								
							</div>
							<!-- pane3 is end for 熄弧时间[断路器熄弧时间 ] -->
							<!-- pane4 is start for 熄弧时间[熄弧时间概率分布] -->
							<div class="chart tab-pane" id="pane4" style="position: relative">
								<div class="box box-success">
										<div class='wrap-condition' style="padding: 10px">
											<div class='form-inline'>
												<label>电压等级：</label> <select id='voltage1' class='vol form-control'>
													<option selected="selected">500kV</option>
												</select>
											</div>
											<div class='form-inline'>
												<label>断路器类型：</label> <select id='type1' class='type form-control'>
													<option selected="selected"></option>
													<option>SF6断路器</option>
													<option>中压断路器</option>
													<option>真空断路器</option>
													<option>低压断路器</option>
													<option>柱上断路器</option>
													<option>油断路器</option>
													<option>塑壳断路器</option>
													<option>模拟断路器</option>
												</select>
											</div>
											<div class='form-inline'>
												<label for='selectMan2'>厂商：</label> 
												<select id='manufacture1' class='manufacture form-control'>
													<option selected="selected"></option>
													<option>ABB</option>
													<option>西门子西电</option>
													<option>平高</option>
													<option>许继</option>
													<option>正泰</option>
													<option>新东北电气沈阳高压开关</option>
													<option>锦开集团</option>
													<option>湖北开关</option>
												</select>
											</div>
											<div class='form-inline'>
												<label for='selectType2'>型号：</label> <select id='model1' class='model form-control'>
													<option selected="selected"></option>
													<option>型号1</option>
													<option>型号2</option>
													<option>型号3</option>
													<option>型号4</option>
												</select>
											</div>
											<button class='btn btn-default' id='check-btn1'>查询</button>
										</div>
										<div style="padding: 10px 31px">
											共分析数据<span id='totalNum'>0</span>条。
										</div>
										<div>
											<div class='col-md-6'>
												<div class='box box-default' style="margin:0">
													<div class='box-header'>
														<h5 class='box-title'>断路器熄弧时间分布</h5>
													</div>
													<div class='box-body'>
														<div id="arcPie" style="height: 300px;"></div>
													</div>
												</div>
											</div>
											<div class='col-md-6'>
												<div class='box box-default' style="margin:0">
													<div class='box-header'>
														<h5 class='box-title'>断路器熄弧时间概率分布</h5>
													</div>
													<div class='box-body'>
														<div id="arcProperty" style="height: 300px;"></div>
													</div>
												</div>
											</div>
										</div>
								</div>
								<div class='col-sm-12'>
									<div class='box box-info'>
										<div class='box-header'>
											<h5 class='box-title'>熄弧时间异常分析结果</h5>
										</div>
										<div class='box-body'>
											<table id='abnormalArcTime' class='table table-bordered table-hover dataTable'>
											</table>
										</div>
									</div>
								</div>
							
							</div>
						</div>
					</div>
				</div>
				<div class="chart tab-pane active" id="pane2" style="position: relative">
					<div class="nav-tabs-custom">
						<div class="nav-tabs-custom">
							<ul class="nav nav-tabs pull-left">
								<li class="active"><a href="#pane5" data-toggle="tab" id="tab5">断路器动作时间</a></li>
								<li><a href="#pane6" id="tab6" data-toggle="tab">动作时间概率分布</a></li>
							</ul>
							<div class="tab-content no-padding">
								<div class="chart tab-pane active hideDom" id="pane5" style="position: relative">
									<div class='box box-success'>
										<div class="box-header">
											<div class="form-inline">
												<input type="text" class="form-control" id="startTimeAct" placeholder="起始日期" />至 <input
													type="text" class="form-control" id="endTimeAct" placeholder="终止日期" />
												<button class='btn btn-default' id='check-btnAct'>查询</button>
											</div>
										</div>
										<div class="box-body">
											<div id="actTimeLine" style="height: 400px;width:500px"></div>
										</div>
									</div>
								</div>
								<div class="chart tab-pane" id="pane6" style="position: relative">
									<div class="box">
										<div class="box-body">
											<div class='wrap-condition'>
												<div class='form-inline'>
													<label>电压等级：</label> <select id='voltage2' class='vol form-control'>
														<option selected="selected">500kV</option>
													</select>
													<label>断路器类型：</label> <select id='type2' class='type form-control'>
														<option selected="selected"></option>
														<option>SF6断路器</option>
														<option>中压断路器</option>
														<option>真空断路器</option>
														<option>低压断路器</option>
														<option>柱上断路器</option>
														<option>油断路器</option>
														<option>塑壳断路器</option>
														<option>模拟断路器</option>
													</select>
													<label for='selectMan2'>厂商：</label> <select id='manufacture2'
														class='manufacture form-control'>
														<option selected="selected"></option>
														<option>ABB</option>
														<option>西门子西电</option>
														<option>平高</option>
														<option>许继</option>
														<option>正泰</option>
														<option>新东北电气沈阳高压开关</option>
														<option>锦开集团</option>
														<option>湖北开关</option>
													</select>
													<label for='selectType2'>型号：</label> <select id='model2' class='model form-control'>
														<option selected="selected"></option>
														<option>型号1</option>
														<option>型号2</option>
														<option>型号3</option>
														<option>型号4</option>
													</select>
													<input type="text" class="form-control" id="startTimeActRate" placeholder="起始日期" style="width:13%"/>
													至
													<input type="text" class="form-control" id="endTimeActRate" placeholder="终止日期" style="width:13%"/>
													<button class='btn btn-default' id='check-btn2'>查询</button>
												</div>
											</div>

										</div>
									</div>
									<div class="col-md-12">
										<div id="actPie" style="height: 400px;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h:inputHidden id="sid" value="#{request.getParameter('stationId')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script src="#{request.contextPath}/resources/js/calendarLocale.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/array-util.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/charts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/category2YLineChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js"></script>
		<script	src="#{request.contextPath}/resources/js/math/SkewDistribution.js"></script>
		<script src="#{request.contextPath}/resources/js/math/GaussianDistribution.js"></script>
		<script src="breaker.js"></script>
	</ui:define>
</ui:composition>
